import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Modal from 'react-modal';
import ReactDOM from 'react-dom';

import { hideNotification } from '../../actions/notifications-actions.js';

/**
 * 提醒状态
 * @class {Notifications}
 * @extends {React.Component}
 * .note-success .note-warning .note-danger
 */
@connect(state => ({
    notifications: state.notifications
}))
export default class Notifications extends Component {

    /**
     * 当接受新属性时触发
     */
    componentWillReceiveProps(nextProps) {
        const { notifications, dispatch } = nextProps;
        
        if (notifications.isOpen) {
            // Auto close
            setTimeout(() => {
                return dispatch(hideNotification());
            }, notifications.duration);
        }
    }

    render() {
        const { notifications, dispatch } = this.props;
        let className;

        switch (notifications.type) {
            case 'success':
                className = 'modal-overlay modal-notifications-overlay top-center note-success';
                break;
            case 'warning':
                className = 'modal-overlay modal-notifications-overlay top-center note-warning';
                break;
            case 'danger':
                className = 'modal-overlay modal-notifications-overlay top-center note-danger';
                break;
            default:
                className = 'modal-overlay modal-notifications-overlay top-center';
        }

        return (
            <Modal isOpen={notifications.isOpen}
                className="modal notifications"
                contentLabel="Example Modal"
                overlayClassName={className}>
                {notifications.text}
            </Modal>
        );
    }
}